import { coffeeData } from "@/data/coffoo";
import { changeShowCoffeeSelection } from "@/store/modules/coffeeSelection";
import { coffeeSelectionType, coffeeType } from "@/type/coffeeType";
// 价格格式化
import { priceFormat } from "@/utils/priceFormat";

import { Col, Row } from "antd";
import { Content } from "antd/es/layout/layout";

import React, { FC, memo, ReactNode, useState } from "react";
import { useDispatch } from "react-redux";
import CoffeeSelection from "./CoffeeSelection";
import { ContentWrapper } from "./style";

interface IProps {
  children?: ReactNode;
  coffeeData: coffeeType[];
  selection: coffeeSelectionType;
}

const OrderContent: FC<IProps> = memo((props) => {
  const { selection } = props;

  const dispatch = useDispatch();

  // 点击选中咖啡
  const [coffee, setCoffee] = useState<coffeeType>(coffeeData[0]);

  const contentClick = (item: coffeeType) => {
    
    setCoffee(item);
    dispatch(changeShowCoffeeSelection(true));
  };

  return (
    <ContentWrapper>
      <Content>
        {/* 咖啡列表 */}
        <Row>
          {coffeeData?.map((item) => {
            return (
              <Col className="coffee-content" span={6} key={item.id}>
                <div
                  className="content"
                  key={item.id}
                  onClick={() => contentClick(item)}
                >
                  <div className="content-name">{item.name}</div>
                  <div className="content-price">{priceFormat(item.price)}</div>
                </div>
              </Col>
            );
          })}
        </Row>
        {/* 选择遮罩 */}
        <CoffeeSelection coffee={coffee} coffeeSelect={selection} />
      </Content>
    </ContentWrapper>
  );
});

export default OrderContent;
